import React, { Component } from 'react'
import Header from "../../components/Header/Header"
import { reqcartlist, reqcartedit, reqcartdelete } from "../../http/api"
import { $pre } from '../../http/http'
import "./Shop.less"
import yImg from "../../assets/img/y.jpeg"
import nImg from "../../assets/img/n.jpeg"
import { Button, SwipeAction, Dialog, Toast } from 'antd-mobile'
export default class Shop extends Component {
  constructor() {
    super()
    this.state = {
      //1.初始值
      arr: [],
      allChecked:false
    }
    //节流防抖
    this.isRequest = true;
  }
  componentDidMount() {
    //2.发请求
    this.getList()
  }
  //请求列表
  async getList() {
    let res = await reqcartlist({
      uid: JSON.parse(sessionStorage.getItem('userInfo')).uid
    })
    if (res.data.code == 200) {
      let arr = res.data.list[1].content ? res.data.list[1].content : []
      //旧arr
      let oldArr = this.state.arr
      //补checked
      arr.forEach(item => {
        let obj = oldArr.find(i=>i.id==item.id)
        item.checked = obj?obj.checked: false
      })
      this.setState({
        arr: arr,
        allChecked: arr.length>0? arr.every(item=>item.checked) :false
      }, () => {
        this.isRequest = true
      })
    }
  }
  //数量+
  async add(id) {
    let res = await reqcartedit({ id: id, type: 2 })
    if (res.data.code == 200) {
      Toast.show({
        content: res.data.msg
      })
      //请求列表
      this.getList()
    }
  }
  //数量-
  async sub(id, num) {
    if (num > 1) {
      if (this.isRequest) {
        this.isRequest = false;
        let res = await reqcartedit({ id: id, type: 1 })
        if (res.data.code == 200) {
          Toast.show({
            content: res.data.msg
          })
          //请求列表
          this.getList()
        }
      }

    } else {
      Toast.show({
        content: "宝贝不能再少了"
      })
    }

  }
  //删除
  async del(id) {
    let res = await reqcartdelete({ id: id })
    if (res.data.code == 200) {
      Toast.show({
        content: res.data.msg
      })
      //请求列表
      this.getList()
    }
  }
  //点了全选
  changeAll(){
    this.setState({
      allChecked : !this.state.allChecked
    },()=>{
      //做逻辑
      this.state.arr.forEach(item=>{
        item.checked = this.state.allChecked
      })
      //放
      this.setState({
        arr:this.state.arr
      })
    })    
  }
  //修改了某一个
  changeOne(index){
    let {arr} =this.state
    //做
    arr[index].checked = !arr[index].checked;
    //放
    this.setState({
      arr:arr,
      allChecked:arr.every(item=>item.checked)
    })
  }
  render() {
    let { arr,allChecked } = this.state
    return (
      <div className='shop'>
        <Header title="购物车"></Header>
        {
          arr.map((item, index) => {
            return (
              <SwipeAction
                key={item.id}
                closeOnAction={false}
                closeOnTouchOutside={false}
                rightActions={[
                  {
                    key: 'delete',
                    text: '删除',
                    color: 'danger',
                    onClick: async () => {
                      await Dialog.confirm({
                        content: '确定要删除吗？',
                        onConfirm: () => {
                          this.del(item.id)
                        }
                      })
                    },
                  },
                ]}
              >
                <div className='item'>
                  <img onClick={()=>this.changeOne(index)} className='checkbox' src={item.checked ? yImg : nImg} alt="" />
                  <img className='img' src={$pre + item.img} alt="" />
                  <div className='right'>
                    <h3>name:{item.goodsname}</h3>
                    <div>price:{item.price}</div>
                    <div>
                      <Button onClick={() => this.sub(item.id, item.num)}>-</Button>
                      {item.num}
                      <Button onClick={() => this.add(item.id)}>+</Button>
                    </div>
                  </div>
                </div>
              </SwipeAction>
            )
          })
        }
        {/* 全选总价 */}
        <div className='footer'>
          <div className='allChecked' onClick={()=>this.changeAll()}>
            <img className='checkbox' src={allChecked ? yImg : nImg} alt="" />
          </div>
          <div className='allPrice'>
            ￥00.00
          </div>
        </div>
      </div>
    )
  }
}
